<template>
  <div class="rightTable">
    <bdSearch
      :searchArguments="searchArguments"
      @search="search"
      @reset="reset"
      :searchBtn="searchBtn"
    >
    </bdSearch>
      <div class="my-[10px]">
        <bdButton :handlerBtn="handlerBtn"></bdButton>
      </div>
      <bdTable :tableHeader="tableHeader" :tableData="tableData" class="mb-[10px]"></bdTable>
      <bdpage
      :pageSize="pages"
      :total="total"
      @size-change="handleSizeChang"
      @current-change="handleCurrentChange"
      ></bdpage>
      <addUserAndEditUser ref="useUser"></addUserAndEditUser>
  </div>
</template>

<script>
import { getUsers, putUsers, DELETEUsers, downLoadUsers } from '@/api/users'
import { mapState } from 'vuex'
import addUserAndEditUser from './components/addUserAndEditUser.vue'
export default {
  name: 'rightTable',
  components: {
    addUserAndEditUser
  },
  data () {
    return {
      searchArguments: [
        {
          id: 1,
          type: 'input',
          value: null,
          placeholder: '输入名称或者描述搜索',
          class: 'w-[180px]',
          name: 'blurry'
        },
        {
          id: 2,
          type: 'picker',
          value: [],
          placeholder: '输入名称或者描述搜索',
          class: 'w-[220px]',
          name: 'createTime'
        },
        {
          id: 3,
          type: 'select',
          value: null,
          placeholder: '请选择',
          class: 'w-[100px]',
          name: 'enabled',
          options: [
            {
              label: '激活',
              value: true
            },
            {
              label: '禁用',
              value: false
            }
          ]
        }
      ],
      searchBtn: [
        {
          id: 1,
          name: '查询',
          handler: 'search'
        },
        {
          id: 2,
          name: '清空',
          handler: 'reset'
        }
      ],
      handlerBtn: [
        {
          id: 1,
          name: '新增',
          icon: 'el-icon-edit',
          handler: this.addUser
        },
        {
          id: 2,
          name: '修改',
          icon: 'el-icon-edit',
          handler: (event) => {
            console.log(event)
            console.log(456)
          }
        },
        {
          id: 3,
          name: '删除',
          type: 'danger',
          icon: 'el-icon-edit',
          handler: () => {
            console.log(789)
          }
        },
        {
          id: 4,
          name: '导出',
          icon: 'el-icon-edit',
          handler: this.downLoadUsers
        }
      ],
      tableHeader: {
        type: 'selection',
        header: [
          {
            prop: 'username',
            label: '用户名',
            showOverflowTooltip: true
          },
          {
            prop: 'nickName',
            label: '昵称',
            showOverflowTooltip: true
          },
          {
            prop: 'gender',
            label: '性别'
          },
          {
            prop: 'phone',
            label: '电话',
            minWidth: 180
          },
          {
            prop: 'email',
            label: '邮箱',
            showOverflowTooltip: true
          },
          {
            prop: 'dept.name',
            label: '部门',
            filter: (row) => {
              return row.dept.name
            }
          },
          {
            prop: 'enabled',
            label: '状态',
            type: 'switch',
            handler: this.changeStatus
          },
          {
            prop: 'createTime',
            label: '创建日期',
            minWidth: 180
          },
          {
            label: '操作',
            type: 'button',
            width: 150,
            btn: [
              {
                id: 1,
                icon: 'el-icon-edit',
                handler: this.handleEdit
              },
              {
                id: 2,
                icon: 'el-icon-delete',
                handler: this.handleDelete
              }
            ]
          }
        ]
      },
      // 列表数据
      tableData: [],
      searchParams: {

      },
      // 分页
      pages: {
        page: 1,
        size: 10
      },
      total: 0,
      searchDeptld: null
    }
  },
  // 计算属性
  computed: {
    ...mapState('user', ['deptld'])
  },
  watch: {
    deptld (newVal, oldVal) {
      // console.log(newVal)
      this.searchDeptld = newVal
      // console.log(this.searchDeptld)
      this.getUsersList()
    }
  },
  mounted () {
    this.getUsersList()
  },
  methods: {
    // 表格数据
    async getUsersList () {
      const params = {
        sort: 'id,desc',
        ...this.searchParams,
        ...this.pages,
        page: this.pages.page - 1,
        deptId: this.searchDeptld
      }
      const { data: { content, totalElements } } = await getUsers(params)
      this.tableData = content
      this.total = totalElements
    },
    // 搜索
    search (params) {
      this.pages.page = 1
      this.searchParams = params
      this.getUsersList()
    },
    // 重置
    reset (params) {
      this.pages.page = 1
      this.searchParams = params
      this.searchDeptld = null
      this.getUsersList()
    },
    // 新增用户
    addUser (event) {
      this.$refs.useUser.isShow()
    },
    // 改变状态 开关事件
    changeStatus (row) {
      console.log(row)
      this.$confirm(`此操作将 "${!row.enable ? '禁用' : '激活'}" ${row.username}, 是否继续?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 请求
        putUsers(row)
      }).catch(() => {
        row.enabled = !row.enabled
      })
    },
    // 编辑用户
    handleEdit (row, scope) {
      // console.log(row)
      // console.log(scope.row)
      this.$refs.useUser.isShow(true, scope.row)
    },
    // 删除用户
    handleDelete (row, scope) {
      DELETEUsers([scope.row.id]).then(res => {
        this.getUsersList()
      })
    },
    // 导出
    downLoadUsers () {
      const params = {
        sort: 'id,desc',
        ...this.searchParams,
        ...this.pages,
        page: this.pages.page - 1,
        deptId: this.searchDeptld
      }
      downLoadUsers(params).then(res => {
        const blob = new Blob([res.data], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8' })
        const downloadElement = document.createElement('a')
        const href = window.URL.createObjectURL(blob)
        downloadElement.href = href
        downloadElement.download = 'zoie.xlsx'
        document.body.appendChild(downloadElement)
        downloadElement.click()
        document.body.removeChild(downloadElement)
        window.URL.revokeObjectURL(href)
        this.resetAndClose()
        console.log(res)
      })
    },
    // 条数
    handleSizeChang (val) {
      this.pages.size = val
      this.getUsersList()
    },
    // 页数
    handleCurrentChange (val) {
      this.pages.page = val
      this.getUsersList()
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
